<template>
    <van-search shape="round" placeholder="请输入搜索关键词" @focus="gotoPage('Search')" />

    <div class="sidebar">
        <div class="sidebarList">
            <van-sidebar v-model="activeKey">
                <van-sidebar-item title="热卖推荐" />
                <van-sidebar-item v-for="index in menuType" :key="index" :title="index.typeDesc"
                    @click="getTypeData(index.type)" />
            </van-sidebar>
        </div>
        <div class="hot-pro">
            <div class="hot-pro-list">
                <div class="hot-pro-item" v-for="(item, index) in productData" :key="index">
                    <Product :pro="item" />
                </div>
            </div>
        </div>

    </div>

    <navigationBar :iNum="itemNum" />
</template>
<script setup lang="ts">
// import { useRouter } from 'vue-router'

import Product from "../components/Product.vue";

import navigationBar from "../components/navigationBar.vue";

import { queryType, goodList } from '@/api/index';

import { useRouter } from "vue-router"


let router: any = useRouter();


// let router: any = useRouter();

//激活的菜单类型下标
let activeKey: any = ref<number>(0);

//菜单类型数据
let menuType: any = ref<Array<any>>([]);

let productData: any = ref<Array<any>>([]);

//商品数据
// let productData: Array<any> = ref<any>([]);
let itemNum = ref<string>("1")

let getType = async () => {

    let res = await queryType();

    // console.log(res.data);

    menuType.value = res.data.result


}
function gotoPage(name: string): void {
    router.push({ name });
}

let getTypeData: (type: string) => void = (type: string): void => {
    let key: string = "";
    let value: string | number = "";

    if (type === "isHot") {
        key = "isHot";
        value = "1";
    } else {
        key = "type";
        value = type;
    }

    scrollTo(0, 0);

    goodList({ key, value }).then((result) => {
        if (result.data.code === 500) {
            productData.value = result.data.result;
        }
    })
}

console.log(menuType);

onMounted(() => {
    getType();
    goodList({ key: "isHot", value: "1", }).then((result) => {
        if (result.data.code === 500) {
            productData.value = result.data.result;
        }
    })
})
</script>

<style lang="less" >
:root {
    --van-sidebar-width: 90px;
    --van-sidebar-selected-border-width: 3px;
    --van-sidebar-selected-border-height: 30px;
    --van-sidebar-selected-border-color: #0c34ba;
}

.sidebar {
    width: 100vw;
    height: calc(100vh - 54px);
    display: flex;

    .sidebarList {
        width: 90px;
        height: 100%;
        background-color: #f7f8fa;
    }

    .hot-pro {
        width: calc(100% - 90px);
        height: 100%;
        padding: 10px;
        overflow-y: scroll;
        background-color: #ffffff;

        .hot-pro-list {
            display: flex;
            flex-wrap: wrap;
            // background-color: #1a366f;
            margin-bottom: 50px;
        }

        .hot-pro-item {
            overflow: hidden;
            // position: relative;
            background-color: #ffffff;
            // border-radius: 5px;
            height: 190px;
            width: calc(~"50% - 5px");
            margin-bottom: 10px;
            margin-right: 10px;

            &:nth-child(2n) {
                margin-right: 0;
            }
        }
    }
}
</style>